<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于本项目</title>
    <link rel="icon" th:href="@{/favicon.png}" type="image/png"/>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/About.css}">
</head>
<body>
<div id="app">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">返回主页面</button>

    <div class="container">
        <div class="header">
            <h1>My Server</h1>
            <p>服务器运营模拟经营游戏</p>
        </div>

        <!-- 项目信息区域 -->
        <div class="info-section">
            <div class="info-grid">
                <!-- 作者信息 -->
                <div class="info-group">
                    <h2>作者信息</h2>
                    <div class="info-item">
                        <strong>姓名:</strong>
                        <span>{{ author.name }}</span>
                    </div>
                    <div class="info-item">
                        <strong>学号:</strong>
                        <span>{{ author.studentId }}</span>
                    </div>
                    <div class="info-item">
                        <strong>班级:</strong>
                        <span>{{ author.class }}</span>
                    </div>
                </div>

                <!-- 项目信息 -->
                <div class="info-group">
                    <h2>项目信息</h2>
                    <div class="info-item">
                        <strong>项目名称:</strong>
                        <span>{{ project.name }}</span>
                    </div>
                    <div class="info-item">
                        <strong>当前版本:</strong>
                        <span>{{ project.version }}</span>
                    </div>
                    <div class="info-item">
                        <strong>构建工具:</strong>
                        <span>{{ project.buildTool }}</span>
                    </div>
                    <div class="info-item">
                        <strong>资源来源:</strong>
                        <span>{{ project.resources }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 致谢区域 -->
        <div class="thanks-section">
            <h2>感谢游玩</h2>
            <p>感谢您体验My Server服务器模拟经营游戏，您的支持是我持续改进的动力！</p>
        </div>
    </div>

    <!-- 页脚版权声明 -->
    <div class="footer">
        Copyright &copy; 2025 Wooming Games. 版权所有。
    </div>
</div>

<script>
    const { createApp, ref } = Vue

    createApp({
        setup() {
            // 作者信息 - 您可以在此处修改这些值
            const author = ref({
                name: "童天宇",         // 请替换为实际姓名
                studentId: "8002124276", // 请替换为实际学号
                class: "软件工程2409班" // 请替换为实际班级
            })

            // 项目信息 - 您可以在此处修改这些值
            const project = ref({
                name: "My Server",
                version: "V1.1.0",
                buildTool: "SSM+SpringSecurity+Vue+Axios",
                resources: "音频来源: @乌鸦Producer"
            })

            // 返回主页面函数
            const goBack = () => {
                // 实际应用中替换为您的返回逻辑
                console.log("返回主页面")
                window.location.href = '/';
            }

            return {
                author,
                project,
                goBack
            }
        }
    }).mount('#app')
</script>
</body>
</html>